<script>
import { ElMessage } from 'element-plus'
import md5 from 'md5'
import axios from 'axios'
import { loginFn } from '../api/user'
import { mapState, mapMutations } from 'vuex'
export default {
  // name: 'LoginView',
  data () {
    return {
      adminname: '', // 管理员账号
      password: '', // 管理员密码
    }
  },
  // computed: mapState({
  //   count: (state)=>{
  //     return state.count
  //   },
  // state => state.count,
  //   userInfo: state => state.userInfo
  // }),
  computed: {
    /*
      mapState 的返回值是一个对象，对象的属性就是 count 和 userInfo
      {
        count: ()=> state.count
        userInfo: ()=> state.userInfo
      }
    */

    // 通过辅助函数来获取 count 值
    ...mapState(['count', 'userInfo'])
  },
  methods: {
    ...mapMutations(['add', 'updateUserInfo']),
    loginClick () {
      console.log(this.adminname, this.password);


      loginFn({ adminname: this.adminname, password: this.password }).then(res => {
        // console.log('11111111111111111111', res.data.data);
        if (res.code == 200) {
          // 登录成功了
          // console.log(this.$router);

          // 将用户的登录信息保存在全局状态管理中
          // this.$store.commit('updateUserInfo', res.data.data)

          // console.log(res.data.data.token);
          localStorage.setItem('token', res.data.token)

          // 通过辅助函数的方式调用修改全局状态中的方法
          this.updateUserInfo(res.data)
          // 跳转到首页
          this.$router.push('/')
        } else {
          // 登录有错误
          ElMessage({
            type: 'error',
            message: '温馨提示：' + res.message
          })
        }
      })

      // 验证账号长度
      // if (this.adminname.length < 5) {
      //   ElMessage({
      //     message: '亲账号长度不够，账号最少为 5 位',
      //     type: 'error'
      //   })
      //   return
      // }


      // 验证密码
      // if (!/^\S*(?=\S{6,})(?=\S*\d)(?=\S*[A-Z])(?=\S*[a-z])(?=\S*[!@#$%^&*? ])\S*$/.test(this.password)) {
      //   ElMessage({
      //     message: '亲密码要求包含数字，大写字母，小写字母和特殊字符组成',
      //     type: 'error'
      //   })
      //   return
      // }



      // md5 是一个 加密函数，我们可以将要加密的字符串传递过去，会返回一个被加密
      // 后的字符串，因为有很多第三方网站会保留密文和明文，所以我们加密的时候要
      // 对用户的密码进行特殊处理后再进行加密处理，加密后将密文发送给后端
      // 对应前端程序员而言，用户和后端千万不能轻易的相信
      // console.log(md5('千锋123老@吴456教育'));
      // console.log(md5('023456'));

      // 发送数据请求了
      // http://localhost:3001/admin/admin/login
      // 因为如果这里这么直接写对应的服务器地址，有一天地址如果发生改变
      // 会导致你应用程序中所有的请求全部失效，你需要全部修改成最新地址
      // 这么做是非常不合理的，所以建议将数据请求的地址进行封装处理
      // axios.post('http://121.89.205.189:3000/admin/admin/login', {
      //   adminname: this.adminname,
      //   password: this.password
      // })
      //   .then(function (response) {
      //     console.log(response);
      //   })
      //   .catch(function (error) {
      //     console.log(error);
      //   });


    },
    updateCountFn () {
      // 调用 mutations 中的方法
      // this.$store.commit('add')

      // 调用 actions 中的方法
      // this.$store.dispatch('addActions')

      // 调用 mutations 中的方法并且传值
      // this.$store.commit('addNum', 10)

      // 调用 actions 中的方法并且传值
      // this.$store.dispatch('addNumActions', { num: 10 })

      // 通过 辅助函数获取到全局状态中的 add 方法
      this.add()

    }
  }
}
</script>
<template>
  <div class="login-container">

    <h1>
      全局状态中的 count 值：{{ this.$store.state.count }}
      <br>
      通过辅助函数的方式来获取 count : {{ count }}
      <button @click="updateCountFn">点击修改</button>
    </h1>

    <div class="form-wrap">
      <h2 class="header"> 嗨购后台管理系统登录 </h2>
      <el-input type="text" v-model="adminname" placeholder="请输入账号" autocomplete="off" />
      <el-input class="psw" v-model="password" placeholder="请输入密码" type="password" autocomplete="off" />
      <el-button type="primary" @click="loginClick">登录</el-button>
    </div>
  </div>
</template>
<style scoped lang="scss">
.login-container {
  height: 100%;
  background-color: #ffebee;

  .form-wrap {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 360px;
    background-color: white;
    padding: 32px;
    transform: translate(-50%, -50%);
    border-radius: 10px;

    .header {
      text-align: center;
      margin-bottom: 36px;
    }

    .psw {
      margin: 20px 0;
    }

    .el-button {
      width: 100%;
    }
  }
}
</style>
